<template>
  <div class="app-container">
    <el-card class="card-form">
      <div class="expert-title-outBox">
        <div class="expert-title">专家库/添加</div>
        <div class="back-btn" @click="handBack">
          <img src="@/assets/images/tripartite/back_button.png" alt="" />返回
        </div>
      </div>
      <el-form
        ref="queryParams"
        :model="queryParams"
        :rules="rules"
        label-width="120px"
      >
        <!-- 基本信息 -->
        <div>
          <div class="model-title">
            <img src="../../../assets/images/tripartite/icon_title.png" />
            <span>基本信息</span>
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="专家姓名" prop="expertName">
                <el-input
                  v-model="queryParams.expertName"
                  placeholder="请输入"
                  clearable
                  style="width: 100%"
                  maxlength="30"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-select
                  v-model="queryParams.sex"
                  placeholder="请选择"
                  clearable
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in sexOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="政治面貌" prop="politicalOutlook">
                <el-select
                  v-model="queryParams.politicalOutlook"
                  placeholder="请选择"
                  clearable
                  size="medium"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in politicalOutlookOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="身份证号码" prop="idNumber">
                <el-input
                  v-model="queryParams.idNumber"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  style="width: 100%"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号码" prop="phoneNumber">
                <el-input
                  v-model="queryParams.phoneNumber"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  style="width: 100%"
                  maxlength="11"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电子邮箱" prop="email">
                <el-input
                  v-model="queryParams.email"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  style="width: 100%"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="联系地址" prop="contactAddress">
                <el-input
                  v-model="queryParams.contactAddress"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  style="width: 100%"
                  maxlength="30"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 学历信息 -->
        <div>
          <div class="model-title">
            <img src="@/assets/images/tripartite/icon_title.png" />
            <span>学历信息</span>
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="毕业学校" prop="graduateCollege">
                <el-input
                  v-model="queryParams.graduateCollege"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  style="width: 100%"
                  maxlength="30"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- <el-form-item label="专业" prop="major">
                <el-input
                  v-model="queryParams.major"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  style="width: 100%"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item> -->
              <el-form-item label="专业" prop="major">
                <el-select
                  v-model="queryParams.major"
                  placeholder="请选择"
                  clearable
                  size="medium"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in majorOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学历" prop="education">
                <el-select
                  v-model="queryParams.education"
                  placeholder="请选择"
                  clearable
                  size="medium"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in educationOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="毕业时间" prop="graduationTime">
                <el-date-picker
                  v-model="queryParams.graduationTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                  size="medium"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 单位信息 -->
        <div>
          <div class="model-title">
            <img src="@/assets/images/tripartite/icon_title.png" />
            <span>单位信息</span>
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="工作单位" prop="workUnit">
                <el-input
                  v-model="queryParams.workUnit"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  style="width: 100%"
                  maxlength="30"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职务" prop="post">
                <el-input
                  v-model="queryParams.post"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  style="width: 100%"
                  maxlength="30"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="擅长领域" prop="areasOfExpertise">
                <el-select
                  v-model="queryParams.areasOfExpertise"
                  placeholder="请选择"
                  clearable
                  size="medium"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in areasOfExpertiseOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="工作年限" prop="workingYears">
                <el-select
                  v-model="queryParams.workingYears"
                  placeholder="请选择"
                  clearable
                  size="medium"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in workingYearsOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 技术职称 -->
        <div>
          <div class="model-title">
            <img src="@/assets/images/tripartite/icon_title.png" />
            <span>技术职称</span>
          </div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="medium"
            @click="handleAdd"
            >添加</el-button
          >
          <el-table
            v-loading="loading"
            :data="technicalTitleDtoS"
            border
            class="table_technical"
          >
            <el-table-column
              label="职称名称"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span v-show="!scope.row.show">{{ getJobTitle(scope.row.jobTitle) }}</span>
                <!-- <el-input
                  v-show="scope.row.show"
                  v-model="scope.row.jobTitle"
                  placeholder="请输入"
                ></el-input> -->
                <el-select
                  v-show="scope.row.show"
                  v-model="scope.row.jobTitle"
                  placeholder="请选择"
                  clearable
                  size="medium"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in jobTitleOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="通过时间" align="center" prop="passingTime">
              <template slot-scope="scope">
                <span v-show="!scope.row.show">{{
                  formatDate(scope.row.passingTime)
                }}</span>
                <el-date-picker
                  v-model="scope.row.passingTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  size="medium"
                  v-show="scope.row.show"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="截止时间" align="center" prop="deadline">
              <template slot-scope="scope">
                <span v-show="!scope.row.show">{{ formatDate(scope.row.deadline) }}</span>
                <el-date-picker
                  v-model="scope.row.deadline"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  size="medium"
                  v-show="scope.row.show"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="附件"
              align="center"
              prop="technicalFile"
              width="200"
            >
              <template slot-scope="scope">
                <span v-show="!scope.row.show">
                  <img
                  v-show="scope.row.technicalFile.fileName"
                  src="@/assets/images/tripartite/icon_files.png"
                  class="files-icon"
                  />
                  {{scope.row.technicalFile?scope.row.technicalFile.fileName:''}}
                </span>
                 <el-upload
                  v-show="scope.row.show"
                  :ref="`uploadRowTechnical${scope.$index}`"
                  class="upload-demo"
                  :action="upload.url"
                  accept=".png, .jpg, .zip, .rar, .7z"
                  :headers="upload.headers"
                  :limit="1"
                  :on-progress="handleFileUploadTechnical"
                  :on-success="(response,file)=>{return handleFileTechnical(response ,file ,scope.row,scope.$index)}"                  
                >
                  <el-input
                    v-model="scope.row.technicalFile.fileName"
                    placeholder="请选择文件"
                    style="width: 400px;"
                    clearable
                  />
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="200"
            >
              <template slot-scope="scope">
                <el-button
                  v-show="!scope.row.show"
                  size="mini"
                  type="text"
                  @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  v-show="scope.row.show"
                  size="mini"
                  type="text"
                  @click="handleSure(scope.row)"
                  >确定</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click.native.prevent="
                    deleteRow(scope.$index, technicalTitleDtoS)
                  "
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 职业资格 -->
        <div>
          <div class="model-title other-title">
            <img src="@/assets/images/tripartite/icon_title.png" />
            <span>职业资格</span>
          </div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="medium"
            @click="handleAddProfession"
            >添加</el-button
          >
          <el-table
            v-loading="loading"
            :data="qualificationAddDtoS"
            border
            class="table_profession"
          >
            <el-table-column label="资格名称" align="center">
              <template slot-scope="scope">
                <span v-show="!scope.row.show">{{
                  scope.row.qualificationName==='1'?'职业经理人'
                  :scope.row.qualificationName==='2'?'人力资源管理师'
                  :scope.row.qualificationName==='3'?'建筑材料员'
                  :scope.row.qualificationName==='4'?'企业法律顾问'
                  :''
                }}</span>
                <el-select
                  v-show="scope.row.show"
                  v-model="scope.row.qualificationName"
                  placeholder="请选择"
                  clearable
                  size="medium"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in qualificationNameOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="资格证书号"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span v-show="!scope.row.show">{{ scope.row.qcNo }}</span>
                <el-input
                  v-show="scope.row.show"
                  v-model="scope.row.qcNo"
                  maxlength="30"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="注册单位"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span v-show="!scope.row.show">{{
                  scope.row.registeredUnit
                }}</span>
                <el-input
                  v-show="scope.row.show"
                  v-model="scope.row.registeredUnit"
                  maxlength="30"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="注册时间" align="center">
              <template slot-scope="scope">
                <span v-show="!scope.row.show">{{
                  formatDate(scope.row.registrationTime)
                }}</span>
                <el-date-picker
                  v-model="scope.row.registrationTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  size="medium"
                  v-show="scope.row.show"
                  style="width: 100%"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="过期时间" align="center">
              <template slot-scope="scope">
                <span v-show="!scope.row.show">{{
                  formatDate(scope.row.expirationTime)
                }}</span>
                <el-date-picker
                  v-model="scope.row.expirationTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  size="medium"
                  v-show="scope.row.show"
                  style="width: 100%"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="附件"
              align="center"
              prop="qualificationFile"
              width="200"
            >
              <template slot-scope="scope">
                <span v-show="!scope.row.show">
                  <img
                  v-show="scope.row.qualificationFile.fileName"
                  src="@/assets/images/tripartite/icon_files.png"
                  class="files-icon"
                />{{ scope.row.qualificationFile ?scope.row.qualificationFile.fileName:''}}</span>
                <el-upload
                  v-show="scope.row.show"
                  :ref="`uploadRow${scope.$index}`"
                  class="upload-demo"
                  :action="upload.url"
                  accept=".png, .jpg, .zip, .rar, .7z"
                  :headers="upload.headers"
                  :limit="1"
                  :on-progress="handleFileUploadProgress"
                  :on-success="(response,file)=>{return handleFileSuccess(response ,file ,scope.row,scope.$index)}"
                  
                >
                  <el-input
                    v-model="scope.row.qualificationFile.fileName"
                    placeholder="请选择文件"
                    style="width: 400px;"
                    clearable
                  />
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="200"
            >
              <template slot-scope="scope">
                <!-- <el-button
                  size="medium"
                  type="text"
                  @click="handleUploadRow(scope.row)"
                  v-show="scope.row.show"
                  >上传附件</el-button
                > -->
                <el-button
                  size="medium"
                  type="text"
                  @click="handleSureProfession(scope.row)"
                  v-show="scope.row.show"
                  >确定</el-button
                >
                <el-button
                  size="medium"
                  type="text"
                  @click="handleEditProfession(scope.row)"
                  v-show="!scope.row.show"
                  >编辑</el-button
                >
                <el-button
                  size="medium"
                  type="text"
                  @click.native.prevent="
                    deleteRow(scope.$index, qualificationAddDtoS)
                  "
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 其他附件 -->
        <div>
          <div class="model-title other-title">
            <img src="@/assets/images/tripartite/icon_title.png" />
            <span>其他附件</span>
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="最高学历证书" prop="haCertificateFile.fileName">
                <el-upload
                  ref="upload1"
                  class="upload-demo"
                  :action="uploadSingle.url"
                  accept=".png, .jpg, .zip, .rar, .7z"
                  :headers="uploadSingle.headers"
                  :limit="1"
                  :on-progress="handleFileUploadTwo"
                  :on-success="handleFileTwo"
                > 
                  <el-input
                    v-model="queryParams.haCertificateFile.fileName"
                    placeholder="请选择文件"
                  />               
                  <div class="img_box">                    
                    <img
                      src="@/assets/images/tripartite/icon_files_upload.png"
                      alt=""
                    />
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作单位意见" prop="workUnitOpinionsFile.fileName">
                <el-upload
                  ref="upload2"
                  class="upload-demo"
                  :action="uploadSingle.url"
                  accept=".png, .jpg, .zip, .rar, .7z"
                  :headers="uploadSingle.headers"
                  :limit="1"
                  :on-progress="handleFileUploadThree"
                  :on-success="handleFileThree"
                >
                  <el-input
                    v-model="queryParams.workUnitOpinionsFile.fileName"
                    placeholder="请选择文件"
                  />
                  <div class="img_box">
                    <img
                      src="@/assets/images/tripartite/icon_files_upload.png"
                      alt=""
                    />
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证" prop="idCardFile.fileName">
                <el-upload
                  ref="upload3"
                  class="upload-demo"
                  :action="uploadSingle.url"
                  accept=".png, .jpg, .zip, .rar, .7z"
                  :headers="uploadSingle.headers"
                  :limit="1"
                  :on-progress="handleFileUploadFour"
                  :on-success="handleFileFour"
                >
                  <el-input
                    v-model="queryParams.idCardFile.fileName"
                    placeholder="请选择文件"
                  />
                  <div class="img_box">
                    <img
                      src="@/assets/images/tripartite/icon_files_upload.png"
                      alt=""
                    />
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="个人照片" prop="personalPhotosFile.fileName">
                <el-upload
                  ref="upload4"
                  class="upload-demo"
                  :action="uploadSingle.url"
                  accept=".png, .jpg, .zip, .rar, .7z"
                  :headers="uploadSingle.headers"
                  :limit="1"
                  :on-progress="handleFileUploadFive"
                  :on-success="handleFileFive"
                >
                  <el-input
                    v-model="queryParams.personalPhotosFile.fileName"
                    placeholder="请选择文件"
                  />
                  <div class="img_box">
                    <img
                      src="@/assets/images/tripartite/icon_files_upload.png"
                      alt=""
                    />
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-form-item class="submit-outBox">
          <el-button size="small" class="btn" @click="handBack">返回</el-button>
          <el-button
            size="small"
            class="btn btn_submit"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";

import {
  getExpert,
  addExpert,
  updateExpert,
} from "@/api/tripartite/expert";
export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      // 弹出层标题
      title: "",
      // 列表参数 （技术职称）
      technicalTitleDtoS: [{technicalFile:{fileName:'',fileUrl:''},show:true}],
      // 列表参数（职业资格）
      qualificationAddDtoS: [{qualificationFile:{fileName:'',fileUrl:''},show:true}],
      // 表单参数
      queryParams: {
        haCertificateFile:{fileName:'',fileUrl:''},
        workUnitOpinionsFile:{fileName:'',fileUrl:''},
        idCardFile:{fileName:'',fileUrl:''},
        personalPhotosFile:{fileName:'',fileUrl:''}
        },
      // 表单校验
      rules: {
        expertName: [
          { required: true, message: "专家姓名不能为空", trigger: "blur" },
        ],
        // sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        // politicalOutlook: [
        //   { required: true, message: "政治面貌不能为空", trigger: "blur" },
        // ],
        idNumber: [
          // { required: true, message: "身份证号不能为空", tigger: ["blur","change"] },
          {
            pattern:
              /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/,
            message: "请输入正确格式",
          },
        ],
        phoneNumber: [
          // { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        email: [
          // { required: true, message: "电子邮箱不能为空", tigger: ["blur","change"] },
          {
            pattern:
              /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
            message: "请输入正确格式",
          },
        ],
        // contactAddress: [
        //   { required: true, message: "联系地址不能为空", trigger: "blur" },
        // ],
        // graduateCollege: [
        //   { required: true, message: "毕业院校不能为空", trigger: "blur" },
        // ],
        // major: [{ required: true, message: "专业不能为空", trigger: "blur" }],
        // education: [
        //   { required: true, message: "学历不能为空", trigger: "blur" },
        // ],
        // graduationTime: [
        //   { required: true, message: "毕业时间不能为空", trigger: "blur" },
        // ],
        workUnit: [
          { required: true, message: "工作单位不能为空", trigger: "blur" },
        ],
        // post: [{ required: true, message: "职务不能为空", trigger: "blur" }],
        // areasOfExpertise: [
        //   { required: true, message: "擅长领域不能为空", trigger: "blur" },
        // ],
        // workingYears: [
        //   { required: true, message: "工作年限不能为空", trigger: "blur" },
        // ],
        // 'haCertificateFile.fileName': [
        //   {
        //     required: true,
        //     message: "最高学历证书不能为空",
        //     trigger: "change",
        //   },
        // ],
        // 'workUnitOpinionsFile.fileName': [
        //   {
        //     required: true,
        //     message: "工作单位意见不能为空",
        //     trigger: "change",
        //   },
        // ],
        // 'idCardFile.fileName': [
        //   { required: true, message: "身份证不能为空", trigger: "change" },
        // ],
        // 'personalPhotosFile.fileName': [
        //   { required: true, message: "个人照片不能为空", trigger: "change" },
        // ],
      },
      // 性别类型数据字典
      sexOptions: [
        { dictValue: "0", dictLabel: "男" },
        { dictValue: "1", dictLabel: "女" },
      ],
      // 政治面貌字典查询
      politicalOutlookOptions: [
        { dictValue: "0", dictLabel: "群众" },
        { dictValue: "1", dictLabel: "党员" },
      ],
      // 学历字典查询
      educationOptions: [
        { dictValue: "0", dictLabel: "博士" },
        { dictValue: "1", dictLabel: "硕士" },
        { dictValue: "2", dictLabel: "本科" },
        { dictValue: "3", dictLabel: "大专" },
      ],
      // 擅长领域字典查询
      areasOfExpertiseOptions: [
        { dictValue: "0", dictLabel: "土木工程" },
        { dictValue: "1", dictLabel: "财政" },
        { dictValue: "2", dictLabel: "环境保护" },
        { dictValue: "3", dictLabel: "计算机技术" },
        { dictValue: "4", dictLabel: "机械工程" },
      ],
      // 工作年限字典查询
      workingYearsOptions: [
        { dictValue: "1", dictLabel: "1" },
        { dictValue: "2", dictLabel: "2" },
        { dictValue: "3", dictLabel: "3" },
        { dictValue: "4", dictLabel: "4" },
        { dictValue: "5", dictLabel: "5" },
        { dictValue: "6", dictLabel: "6" },
        { dictValue: "7", dictLabel: "7" },
        { dictValue: "8", dictLabel: "8" },
        { dictValue: "9", dictLabel: "9" },
        { dictValue: "10", dictLabel: "10" },
      ],
      // 专业字典查询
      majorOptions:[],
      // 技术职称字典查询
      jobTitleOptions:[],
      // 职业资格字典查询
      qualificationNameOptions:[],
      // 上传文件参数 
      uploadSingle: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传文件名称
        fileName: "请选择文件",
      },
      // 上传文件参数 当前行
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传文件名称
        fileName: "请选择文件",
      },
      rowData:{},
      rowSave:{},
      open:false,
    };
  },
  created() {
    this.getExpertData()
    this.getDicts("major").then((response) => {
      console.log('获取专业',response);
      this.majorOptions = response.data;
    });
    this.getDicts("technical_type").then((response) => {
      console.log('获取技术',response);
      this.jobTitleOptions = response.data;
    });
    this.getDicts("professional_type").then((response) => {
      console.log('获取资格',response);
      this.qualificationNameOptions = response.data;
    });
    this.getDicts("education_background").then((response) => {
      console.log('获取学历',response);
      this.educationOptions = response.data;
    });
  },
  methods: {
    /** 格式化时间 */
    formatDate(val) {
      if(val){
        return val.substring(0, 10);
      }
    },
    /** 获取专家详情 */
    getExpertData(){
      const expertId = this.$route.query.expertId;
      if (expertId) {
        getExpert(expertId).then((response) => {
          this.reset();
          this.queryParams = response.data;
          if(response.data.phoneNumber){
            this.queryParams.phoneNumber = parseInt(response.data.phoneNumber);
          }
          if(response.data.haCertificateFileDoc){
            this.queryParams.haCertificateFile = response.data.haCertificateFileDoc;
          }else{
            this.queryParams.haCertificateFile = {fileName:'',fileUrl:''}
          }
          if(response.data.workUnitOpinionsFileDoc){
            this.queryParams.workUnitOpinionsFile = response.data.workUnitOpinionsFileDoc;
          }else{
            this.queryParams.workUnitOpinionsFile = {fileName:'',fileUrl:''}
          }
          if(response.data.idCardFileDoc){
            this.queryParams.idCardFile = response.data.idCardFileDoc;
          }else{
            this.queryParams.idCardFile = {fileName:'',fileUrl:''}
          }
          if(response.data.personalPhotosFileDoc){
            this.queryParams.personalPhotosFile = response.data.personalPhotosFileDoc;
          }else{
            this.queryParams.personalPhotosFile = {fileName:'',fileUrl:''}
          }
          // 技术职称
          this.technicalTitleDtoS = response.data.technicalTitles;
          this.technicalTitleDtoS.map((item) => {
            if(item.technicalFileDoc){
             item.technicalFile=item.technicalFileDoc
            }else{
              item.technicalFile ={fileName:'',fileUrl:''}
            }
            this.$set(item, "show", false);
          });
          // 职业资格
          this.qualificationAddDtoS = response.data.qualifications;
          this.qualificationAddDtoS.forEach((item) => {
            if(item.qualificationFileDoc){
             item.qualificationFile=item.qualificationFileDoc
            }else{
              item.qualificationFile ={fileName:'',fileUrl:''}
            }
            this.$set(item, "show", false);
          });
          // console.log("获取专家详情", response,this.queryParams);
        });
      } else {
        this.reset();
      }
    },
    /**表单重置 */
    reset() {
      this.queryParams = {
        age: undefined,
        areasOfExpertise: "",
        contactAddress: "",
        education: "",
        email: undefined,
        expertName: "",
        graduateCollege: "",
        graduationTime: "",
        haCertificateFile: {fileName:'',fileUrl:''},
        idCardFile: {fileName:'',fileUrl:''},
        idNumber: undefined,
        major: "",
        personalPhotosFile: {fileName:'',fileUrl:''},
        phoneNumber: undefined,
        politicalOutlook: "",
        post: "",
        qualificationAddDtoS: [
          {
            expirationTime: "",
            qcNo: "",
            qualificationFile: {fileName:'',fileUrl:''},
            qualificationName: "",
            registeredUnit: "",
            registrationTime: "",
          },
        ],
        sex: "",
        technicalTitleDtoS: [
          {
            deadline: "",
            jobTitle: "",
            passingTime: "",
            technicalFile: {fileName:'',fileUrl:''},
          },
        ],
        workUnit: "",
        workUnitOpinionsFile: {fileName:'',fileUrl:''},
        workingYears: "",
      };
      this.resetForm("queryParams");
    },
    /** 返回按钮操作 */
    handBack() {
      this.$router.push({
        path: "/tripartite/expert",
      });
    },
    /** 新增按钮操作 技术职称*/
    handleAdd() {
      this.$nextTick(() => {
        this.technicalTitleDtoS.push({
          deadline: "",
          jobTitle: "",
          passingTime: "",
          technicalFile: {fileName:'',fileUrl:''},
          show: true,
        });
      });
      this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
    },
    handleSure(row) {
      // console.log('当前行',row,row.show);
      if (row.show == true && row.jobTitle) {
        row.show = false;
      }else{
        return this.$message.error("请先选择职称名称后进行确定");
      }
    },
    /** 修改按钮操作 技术职称*/
    handleEdit(row) {
      if (row.show == false) {
        row.show = true;
      }
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    /** 新增按钮操作 职业资格*/
    handleAddProfession() {
      this.qualificationAddDtoS.push({
        expirationTime: "",
        qcNo: "",
        qualificationFile: {fileName:'',fileUrl:''},
        qualificationName: "",
        registeredUnit: "",
        registrationTime: "",
        show: true,
        index: new Date()
      });
    },
    // 编辑按钮操作
    handleEditProfession(row) {
      row.show = true;
    },
    // 确定按钮操作
    handleSureProfession(row) {
      row.show = false;
    },
 
    /** 提交按钮 */
    submitForm: function () {
      console.log("新增专家库", this.queryParams);
      this.$refs["queryParams"].validate((valid) => {
        if (valid) {
          this.queryParams.technicalTitleDtoS = this.technicalTitleDtoS.filter(
            (item) => item.show == false
          );
          if (this.queryParams.technicalTitleDtoS.length == 0) {
            return this.$message.error("请先添加并确定技术职称");
          }
          for(let i = 0; i < this.queryParams.technicalTitleDtoS.length; i++) {
            if( this.queryParams.technicalTitleDtoS[i].jobTitle == "") {
              return this.$message.error("请先选择职称名称后进行确定");
            }
          }
          this.queryParams.qualificationAddDtoS =
            this.qualificationAddDtoS.filter((item) => item.show == false);
          if (
            this.queryParams.expertId == undefined ||
            this.queryParams.expertId == ""
          ) {
            addExpert(this.queryParams).then((response) => {
              this.msgSuccess("新增成功");
              this.$router.push({
                path: "/tripartite/expert",
                query: { pageNum: 1,pageSize:10 },
              });
            });
          } else {
            updateExpert(this.queryParams).then((response) => {
              this.msgSuccess("修改成功");
              this.$router.push({
                path: "/tripartite/expert",
                query: { pageNum: 1, pageSize:10 },
              });
            });
          }
        }
      });
    },

    // 文件上传中处理 （最高学历证书）
    handleFileUploadTwo(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileTwo(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.$refs.upload1.clearFiles();
      if(response.code!=500&&response.data){
        this.queryParams.haCertificateFile.fileName = file.name;
        this.queryParams.haCertificateFile.fileUrl = response.data.fileUrl;
      }else{
        this.$message.error(response.msg)
      }
    },
    // 文件上传中处理 （工作单位意见）
    handleFileUploadThree(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileThree(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.$refs.upload2.clearFiles();
      if(response.code!=500&&response.data){
        this.queryParams.workUnitOpinionsFile.fileName = file.name;
        this.queryParams.workUnitOpinionsFile.fileUrl = response.data.fileUrl;
      }else{
        this.$message.error(response.msg)
      }
    },
    // 文件上传中处理 （身份证）
    handleFileUploadFour(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileFour(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.$refs.upload3.clearFiles();
      if(response.code!=500&&response.data){
        this.queryParams.idCardFile.fileName = file.name;
        this.queryParams.idCardFile.fileUrl = response.data.fileUrl;
      }else{
        this.$message.error(response.msg)
      }
    },
    // 文件上传中处理 （个人照片）
    handleFileUploadFive(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileFive(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.$refs.upload4.clearFiles();
      if(response.code!=500&&response.data){
        this.queryParams.personalPhotosFile.fileName = file.name;
        this.queryParams.personalPhotosFile.fileUrl = response.data.fileUrl;
      }else{
        this.$message.error(response.msg)
      }      
    },
     // 上传当前行附件
    handleUploadRow(row){
      // this.upload.title = "附件";
      this.upload.open = true;
      this.rowData = row
    },
    /** 取消按钮 技术职称*/
    cancelRowFile() {
      this.upload.open = false;
    },
    submitRowFile(){
      this.upload.open = false;
    },
    // 文件上传中处理 （当前行职业资格）
    handleFileUploadProgress(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, row,index) {
      console.log("文件上传成功", response, file ,row,index);
      this.$refs[`uploadRow${index}`].clearFiles();
      if(response.code!=500&&response.data){
        this.upload.fileName = file.name;
        row.qualificationFile.fileName = file.name;
        row.qualificationFile.fileUrl = response.data.fileUrl;
        this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
      }else{
        this.$message.error(response.msg)
      }
    },
    // 提交上传文件 （当前行）
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 文件上传中处理 （当前行技术职称）
    handleFileUploadTechnical(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileTechnical(response, file, row,index) {
      console.log("文件上传成功", response, file ,row,index);
      this.$refs[`uploadRowTechnical${index}`].clearFiles();
      if(response.code!=500&&response.data){
        row.technicalFile.fileName = file.name;
        row.technicalFile.fileUrl = response.data.fileUrl;
        this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
      }else{
        this.$message.error(response.msg)
      }
    },
    getJobTitle(key) {
      let options = this.jobTitleOptions.filter(item => item.dictValue === key)
      if (options.length > 0) return options[0].dictLabel;
      return ''
    }
  },
};
</script>
<style scoped lang="scss">
.expert-title-outBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .expert-title {
    font-weight: 500;
    font-size: 18px;
  }
  .back-btn {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      position: relative;
      top: 2px;
    }
  }
}
.submit-outBox {
  margin-left: 0;
  padding-top: 48px;
  width: 100%;
  text-align: center;
  border-top: 1px solid #ebecef;
  .btn {
    width: 196px;
    height: 40px;
    margin-right: 10px;
  }
  .btn_submit {
    background: #0d72ff;
  }
}
.model-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebecef;
  border-top: 1px solid #ebecef;
  margin-bottom: 24px;
  img {
    width: 16px;
    height: 16px;
    position: relative;
    right: 5px;
    top: 2px;
  }
}
.other-title {
  margin-top: 24px;
}
.table_technical,
.table_profession {
  margin-top: 24px;
}
</style>
<style lang="scss">
/**表单label取消加粗 */
.card-form {
  .el-form-item {
    margin-bottom: 24px;
  }
  label {
    font-weight: normal !important;
  }
}
.submit-outBox {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
/* 弹出窗样式 */
.dialog-box {
  .el-dialog__body {
    padding: 24px 69px 24px 69px;
    border-top: 1px solid #ebecef;
    border-bottom: 1px solid #ebecef;
    label {
      font-weight: 400 !important;
    }
  }
  .el-dialog__footer {
    padding: 16px 20px;
  }
  .el-dialog__headerbtn {
    background: url("../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-dialog__close {
      visibility: hidden;
    }
  }
}
/* 删除弹出框样式 */
.del_box {
  width: 345px;
  height: 175px;
  .el-message-box__headerbtn {
    background: url("../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-message-box__close {
      visibility: hidden;
    }
  }
  .el-message-box__content {
    padding: 26px 95px;
    font-size: 16px;
    .el-message-box__status.el-icon-warning {
      color: #ea4747;
    }
    .el-message-box__status + .el-message-box__message {
      padding-right: 0;
    }
  }
}
// 文件上传
.upload-demo {
  .el-upload-list {
    display: none;
  }
  .el-upload {
    display: flex;
  }
  .file_name_box {
    width: 400px;
    height: 36px;
    color: #afb3bd;
    border: 1px solid #d8d8d8;
    text-align: left;
    padding-left: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 30px;
  }
  .img_box {
    height: 36px;
    width: 36px;
    line-height: 36px;
    background: #0d72ff;
    text-align: center;
    border-radius: 0px 4px 4px 0px;
    position: absolute;
    right: -1%;
    top: 1px;
    img {
      width: 16px;
      height: 16px;
    }
  }
  .table-img_box {
    position: absolute;
    left: 200px;
    top: 10px;
  }
}
// 文件图标样式更改
.files-icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: relative;
  top: 4px;
}
</style>
